import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { Button, Tabs } from 'antd';
import { useTranslation } from 'react-i18next';

import Summary from './component/Summary';
import CommentListCom from './component/CommentListCom';

import { getCompanyCommentApi } from '@src/services/company';

import styles from './styles.module.less';

const CompanyInfo = () => {
  const location = useLocation();
  const { t } = useTranslation();

  const [getCommentLoading, setGetCommentLoading] = useState(false);
  const [commentsData, setCommentsData] = useState([]);

  useEffect(() => {
    onCommentLoad();
  }, [])
  
  const onCommentLoad = async () => {
    setGetCommentLoading(true);

    const res = await getCompanyCommentApi({
      business_server_id: location?.state?.business_server_id
    });

    if (!res) return;
    setCommentsData(res);
    setGetCommentLoading(false);
  }

  return (
    <div className={styles.company_info}>
      <div className={styles.top_box}>
        <div className={styles.left_box}>
          <div className={styles.logo}>
            <img src={location?.state?.company?.logo_path} alt='' />
          </div>
          <div className={styles.name_box}>
            <span className={styles.name}>{location?.state?.company?.company_name}</span>
            <span style={{ marginTop: 10 }}>{location?.state?.comment_number}{t('Comments')}</span>
          </div>
        </div>
        <div className={styles.right_box}>
          <Button type="primary">{t('Contact Supplier')}</Button>
        </div>
      </div>
      <div className={styles.content_box}>
        <Tabs
           defaultActiveKey="summary"
           items={[
            {
              label: t('Overview'),
              key: 'summary',
              children: <Summary companyInfo={location?.state} />
            },
            {
              label: `${t('Comment')}(${location?.state?.comment_number})`,
              key: 'comment',
              children: <CommentListCom
                companyInfo={location?.state}
                getCommentLoading={getCommentLoading}
                commentsData={commentsData}
                onRefresh={onCommentLoad}
              />
            }
           ]}
        />
      </div>
    </div>
  )
};

export default CompanyInfo;